<template>
    <!-- 高空瞭望弹框 -->
    <div class="high_altitude">
        <div>
            <img src="@/assets/image/waringcarback.png" alt="">
        </div>
        <div>
            <div></div>
            <div>
                <span></span>
                <span>缩放</span>
                <span></span>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
.high_altitude{
    width: 100%;
    padding: 40px;
    display: flex;
    justify-content: space-between;
    >div{
        &:nth-of-type(1){
            height: 290px;
            width: 70%;
            margin-right: 16px;
            img{
                width: 100%;
                height: 100%;
            }
        }
        &:nth-of-type(2){
            flex: 1;
            background: rgba(255, 255, 255, 0.08);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            padding: 20px 16px;
            >div{
                width: 100%;
                &:nth-of-type(1){
                    width: 94%;
                    background: url("@/assets/image/highaltitude.png") no-repeat;
                    background-size: 100% 100%;
                    height: 176px;
                }
                &:nth-of-type(2){
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 135px;
                    background: url("@/assets/image/zoomback.png") no-repeat;
                    background-size: 100% 100%;
                    padding: 9px 15px;
                    span{
                        display: inline-block;
                        &:nth-of-type(2){
                            font-size: 14px;
                            color: #FFFFFF;
                        }
                        &:nth-of-type(1),&:nth-of-type(3){
                            width: 32px;
                            height: 32px;
                        }
                        &:nth-of-type(1){
                            background:url("@/assets/image/enlargeicon.png") no-repeat ;
                            background-size: 100% 100%;
                            margin-right: 5px;
                            cursor: pointer;
                        }
                        &:nth-of-type(3){
                            background:url("@/assets/image/zoomouticon.png") no-repeat ;
                            background-size: 100% 100%;
                            margin-left: 5px;
                            cursor: pointer;
                        }
                    }
                }
            }
        }
    }
}
</style>
